<template>
  <el-form
    ref="form"
    label-width="5em"
    v-loading="formLoading"
    :model="form"
    :rules="rules"
  >
    <el-form-item label="题干" prop="titleContent">
      <el-input v-model="form.titleContent" :disabled="isDisabled" />
    </el-form-item>
    <el-form-item
      v-for="(item, index) in form.items"
      :key="item.prefix"
      :label="'选项' + item.prefix"
      :rules="[{ required: true, message: '此项必填', trigger: 'blur' }]"
      :prop="'items.' + index + '.content'"
    >
      <el-row type="flex" class="answer-option">
        <el-input v-model="item.content" :disabled="isDisabled" />
        <el-button
          v-if="!isDisabled && form.items.length > 1"
          type="danger"
          size="mini"
          icon="el-icon-delete"
          @click="answerOptionRemove(index)"
        />
      </el-row>
    </el-form-item>
    <el-form-item >
      <el-button type="success" :disabled="isDisabled" @click="answerOptionAdd">
        添加选项
      </el-button>
    </el-form-item>
    <el-form-item label="答案" prop="correctArray">
      <el-checkbox-group v-model="form.correctArray" :disabled="isDisabled">
        <el-checkbox
          v-for="item in form.items"
          :label="item.prefix"
          :key="item.prefix"
        >
          {{ item.prefix }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="解析" prop="analyze">
      <el-input type="textarea" v-model="form.analyze" :disabled="isDisabled" />
    </el-form-item>
    <el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="isDisabled" @click="submitForm">
          保存
        </el-button>
        <el-button :disabled="isDisabled" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form-item>
  </el-form>
</template>

<script>
import { getQuestionInfo } from "@/api2/question";

export default {
  inject: ["question"],
  data() {
    return {
      formLoading: false,
      form: {
        titleContent: "",
        items: [
          { prefix: "A", content: "" },
          { prefix: "B", content: "" },
          { prefix: "C", content: "" },
          { prefix: "D", content: "" },
        ],
        correctArray: [],
        analyze: "",
      },
      rules: {
        titleContent: [
          { required: true, message: "请输入题干", trigger: "blur" },
        ],
        correctArray: [
          { required: true, message: "请选择正确答案", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    isDisabled() {
      return this.form.status == 2 || this.form.status == 3;
    },
  },
  mounted() {
    this.question?.id && this.getDetail();
  },
  methods: {
    async getDetail() {
      this.formLoading = true
      const { data } = await getQuestionInfo({ id: this.question.id });
      this.questionType = data.questionType;
      if (this.questionType == 2 && data.correct) {
        data.correctArray = data.correct.split(",");
      }
      this.form = data;
      this.formLoading = false
    },
    answerOptionRemove(index) {
      let items = this.form.items;
      let newPrefix = "A";
      items.splice(index, 1);
      if (items.length > 0) {
        items.forEach((item) => {
          item.prefix = newPrefix;
          newPrefix = String.fromCharCode(newPrefix.charCodeAt() + 1);
        });
      }
    },
    answerOptionAdd() {
      let items = this.form.items;
      let newLastPrefix = "A";
      if (items.length > 0) {
        let last = items[items.length - 1];
        newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1);
      }
      items.push({ prefix: newLastPrefix, content: "" });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true;
          this.$emit("submit", this.form, () => {
            this.formLoading = false;
            !this.question?.id && this.resetForm()
          });
        }
      });
    },
    resetForm() {
      this.$refs["form"].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  margin-right: 1em;
}
.answer-option > button {
  margin-left: 10px;
}
::v-deep {
  .el-icon-delete {
    transform: scale(1.2);
  }
  .el-icon-circle-plus-outline {
    transform: scale(1.27);
  }
}
</style>
